<template>
	<view class="content">
		<u-navbar bgColor="#fff" :placeholder="true" :autoBack="true">
			<view slot="center" class="navigate-title">税费计算器</view>
		</u-navbar>

		<view class="info-box">
			<view class="title">金额填写</view>
			<u--form labelPosition="left" :model="form" labelWidth="170rpx" :labelStyle="inputLabel">
				<u-form-item label="无票收入" borderBottom prop="income">
					<u--input placeholder="请输入无票收入金额" placeholderClass="input-placeholder" :customStyle="inputStyle"
						v-model="form.income" border="none" type="number"></u--input>
				</u-form-item>
				<u-form-item label="开出发票金额" borderBottom prop="invoiceAmount">
					<view class="invoice-input">
						<view style="width: 158rpx;">
							<u--input placeholder="普票" placeholderClass="input-placeholder" v-model="form.invoiceAmount"
								inputAlign="center" :customStyle="inputStyle" type="number"></u--input>
						</view>
						<view style="width: 158rpx;">
							<u--input placeholder="专票" placeholderClass="input-placeholder" v-model="form.specialTicket"
								inputAlign="center" :customStyle="inputStyle" type="number"></u--input>
						</view>
						<view class="daoru">导入</view>
					</view>
				</u-form-item>
				<u-form-item label="收到发票金额" borderBottom prop="receiveAmont">
					<view class="invoice-input">
						<view style="width: 158rpx;">
							<u--input placeholder="普票" placeholderClass="input-placeholder" v-model="form.receiveAmont"
								inputAlign="center" :customStyle="inputStyle" type="number"></u--input>
						</view>
						<view style="width: 158rpx;">
							<u--input placeholder="专票" placeholderClass="input-placeholder" v-model="form.receiveTicket"
								inputAlign="center" :customStyle="inputStyle" type="number"></u--input>
						</view>
						<view class="daoru">导入</view>
					</view>
				</u-form-item>
				<u-form-item label="员工支出" borderBottom prop="income">
					<u--input placeholder="请输入员工支出金额" placeholderClass="input-placeholder" :customStyle="inputStyle"
						v-model="form.staffPay" border="none" type="number"></u--input>
				</u-form-item>
				<u-form-item label="其他支出" borderBottom prop="income">
					<u--input placeholder="请输入其他支出金额" placeholderClass="input-placeholder" :customStyle="inputStyle"
						v-model="form.otherPay" border="none" type="number"></u--input>
				</u-form-item>
				<u-form-item label="类型" borderBottom>
					<view class="check-box">
						<view class="check-btn" style="width: 50%;">
							<view :class="form.companyType == 0? 'round' : 'round-ash'" @click="form.companyType = 0">
								<view class="round-click"></view>
							</view>
							<view @click="form.companyType = 0">小规模</view>
						</view>
						<view class="check-btn" style="width: 50%;">
							<view :class="form.companyType == 1? 'round' : 'round-ash'" @click="form.companyType = 1">
								<view class="round-click"></view>
							</view>
							<view @click="form.companyType = 1">一般纳税人</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="类型" borderBottom>
					<view class="check-box">
						<view class="check-btn" style="width: 50%;">
							<view :class="form.type == 0? 'round' : 'round-ash'" @click="form.type = 0">
								<view class="round-click"></view>
							</view>
							<view @click="form.type = 0">公司</view>
						</view>
						<view class="check-btn" style="width: 50%;">
							<view :class="form.type == 1? 'round' : 'round-ash'" @click="form.type = 1">
								<view class="round-click"></view>
							</view>
							<view @click="form.type = 1">个体</view>
						</view>
					</view>
				</u-form-item>
				<u-form-item label="利润分配" borderBottom>
					<view class="check-box">
						<view class="check-btn" style="width: calc(100% / 3);">
							<view :class="form.profit == 0? 'round' : 'round-ash'" @click="form.profit = 0">
								<view class="round-click"></view>
							</view>
							<view @click="form.profit = 0">不发放</view>
						</view>
						<view class="check-btn" style="width: calc(100% / 3);">
							<view :class="form.profit == 1? 'round' : 'round-ash'" @click="form.profit = 1">
								<view class="round-click"></view>
							</view>
							<view @click="form.profit = 1">工资发放</view>
						</view>
						<view class="check-btn" style="width: calc(100% / 3);">
							<view :class="form.profit == 2? 'round' : 'round-ash'" @click="form.profit = 2">
								<view class="round-click"></view>
							</view>
							<view @click="form.profit = 2">股份分红</view>
						</view>
					</view>
				</u-form-item>
			</u--form>
		</view>

		<view class="js-btn" @click="calculate()">计算</view>

		<view class="result-box">
			<view style="height: 30rpx;"></view>
			<view class="top">应交税费</view>
			<view class="item">
				<text style="width: 140rpx;margin-right: 24rpx;">增值税</text>
				<text>{{ zzsNum }}</text>
			</view>
			<view class="item">
				<text style="width: 140rpx;margin-right: 24rpx;">附加税</text>
				<text>0</text>
			</view>
			<view class="item">
				<view style="width: 140rpx;margin-right: 24rpx;">{{ qyOrGrName }}</view>
				<view>{{ qyOrGr }}</view>
			</view>
			<view class="total">
				<view></view>
				<view>总合计：{{ (parseFloat(zzsNum) + parseFloat(qyOrGr)) }}</view>
			</view>
		</view>

		<view style="height: 40rpx;"></view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				form: {
					income: '',
					invoiceAmount: '',
					specialTicket: '',
					receiveAmont: '',
					receiveTicket: '',
					staffPay: '',
					otherPay: '',
					companyType: 0,
					type: 0,
					profit: 0,
				},
				zzsNum: 0,
				qyOrGr: 0,
				qyOrGrName: '企业所得税',
			}
		},
		methods: {
			calculate() {
				this.handleData()
				this.zzs()
				if (this.form.type == 0) {
					this.qyOrGrName = '企业所得税'
					this.qy()
				} else {
					this.qyOrGrName = '个人所得税'
					this.gr()
				}
			},
			zzs() {
				this.zzsNum = 0
				if (this.form.companyType == 0) {
					let num = (parseFloat(this.form.income) + parseFloat(this.form.receiveAmont))
					if (num > 1200000) {
						this.zzsNum = num * 0.01
					}
					this.zzsNum += this.form.receiveTicket * 0.01
				}
				this.zzsNum = this.zzsNum.toFixed(2)
			},
			qy() {
				this.qyOrGr = 0
				let num = (parseFloat(this.form.income) + parseFloat(this.form.invoiceAmount) + parseFloat(this.form
					.specialTicket)) - (parseFloat(this.zzsNum) + parseFloat(this.form.staffPay) + parseFloat(this.form
					.otherPay))
				if (num > 3000000) {
					this.qyOrGr = num * 0.25
				} else {
					this.qyOrGr = num * 0.05
				}
				this.qyOrGr = this.qyOrGr.toFixed(2)
			},
			gr() {
				this.qyOrGr = 0
				let num = (parseFloat(this.form.income) + parseFloat(this.form.invoiceAmount) + parseFloat(this.form
					.specialTicket)) - (parseFloat(this.zzsNum) + parseFloat(this.form.staffPay) + parseFloat(this.form
					.otherPay))
				if (this.form.profit == 0) {
					this.qyOrGr = 0
				} else if (this.form.profit == 3) {
					this.qyOrGr = num * 0.2
				} else {
					if (num <= 5000) {
						this.qyOrGr = 0
					} else if (num > 5000 && num <= 8000) {
						this.qyOrGr = num * 0.03
					} else if (num > 8000 && num <= 12000) {
						this.qyOrGr = num * 0.1
					} else if (num > 17000 && num <= 30000) {
						this.qyOrGr = num * 0.2
					} else if (num > 30000 && num <= 40000) {
						this.qyOrGr = num * 0.25
					} else if (num > 40000 && num <= 60000) {
						this.qyOrGr = num * 0.3
					} else if (num > 60000 && num <= 85000) {
						this.qyOrGr = num * 0.35
					} else {
						this.qyOrGr = num * 0.45
					}
				}
				this.qyOrGr = this.qyOrGr.toFixed(2)
			},
			handleData() {
				if (!this.form.income || this.form.income < 0) {
					this.form.income = 0
				}
				if (!this.form.invoiceAmount || this.form.invoiceAmount < 0) {
					this.form.invoiceAmount = 0
				}
				if (!this.form.specialTicket || this.form.specialTicket < 0) {
					this.form.specialTicket = 0
				}
				if (!this.form.receiveAmont || this.form.receiveAmont < 0) {
					this.form.receiveAmont = 0
				}
				if (!this.form.receiveTicket || this.form.receiveTicket < 0) {
					this.form.receiveTicket = 0
				}
				if (!this.form.staffPay || this.form.staffPay < 0) {
					this.form.staffPay = 0
				}
				if (!this.form.otherPay || this.form.otherPay < 0) {
					this.form.otherPay = 0
				}
			}
		},
		computed: {
			inputLabel() {
				const style = {
					'font-size': '26rpx',
					'letting-spacing': '2rpx'
				}
				return style
			},
			inputStyle() {
				const style = {
					height: '36rpx',
				}
				return style
			},
		},
	}
</script>

<style lang="scss" scoped>
	.content {
		.info-box {
			width: calc(100% - 36rpx);
			height: auto;
			border-radius: 20rpx;
			background: rgba(255, 255, 255, 1);
			box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
			padding: 38rpx 18rpx;
			margin-top: 24rpx;

			.title {
				font-size: 30rpx;
				font-weight: 700;
			}

			::v-deep .input-placeholder {
				color: rgba(207, 207, 207, 1);
				font-size: 24rpx;
				letter-spacing: 2rpx;
			}

			.invoice-input {
				display: flex;
				justify-content: space-between;
				align-items: center;
			}

			.check-box {
				width: 100%;
				height: 50rpx;
				display: flex;
				justify-content: space-between;
				font-size: 24rpx;
				letter-spacing: 2rpx;
				color: rgba(51, 51, 51, 1);

				.check-btn {
					display: flex;
					align-items: center;

					.round {
						width: 24rpx;
						height: 24rpx;
						border-radius: 50%;
						border: 2rpx solid rgba(65, 136, 239, 1);
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 12rpx;

						.round-click {
							width: 16rpx;
							height: 16rpx;
							border-radius: 50%;
							background: rgba(65, 136, 239, 1);
						}
					}

					.round-ash {
						width: 24rpx;
						height: 24rpx;
						border-radius: 50%;
						border: 2rpx solid rgba(204, 204, 204, 1);
						display: flex;
						justify-content: center;
						align-items: center;
						margin-right: 12rpx;

						.round-click {
							width: 16rpx;
							height: 16rpx;
							border-radius: 50%;
							background: rgba(204, 204, 204, 1);
						}
					}
				}
			}

			.daoru {
				width: 126rpx;
				height: 60rpx;
				border-radius: 6rpx;
				background: rgba(65, 136, 239, 1);
				box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.08);
				font-size: 28rpx;
				text-align: center;
				line-height: 60rpx;
				color: #fff;
			}
		}

		.js-btn {
			width: 690rpx;
			height: 82rpx;
			line-height: 82rpx;
			border-radius: 20rpx;
			background: rgba(65, 136, 239, 1);
			box-shadow: 0rpx 2rpx 8rpx rgba(65, 136, 239, 0.25), 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.08);
			margin-top: 30rpx;
			font-size: 30rpx;
			font-weight: 700;
			text-align: center;
			color: #fff;
		}

		.result-box {
			height: 432rpx;
			border-radius: 20rpx;
			background: rgba(65, 136, 239, 0.12);
			box-shadow: 0rpx 2rpx 4rpx rgba(0, 0, 0, 0.1);
			margin-top: 30rpx;
			padding-left: 40rpx;
			font-size: 28rpx;

			.top {
				font-weight: 700;
				text-align: center;
				margin-bottom: 50rpx;
			}

			.item {
				margin-bottom: 40rpx;
				display: flex;
			}

			.total {
				width: calc(100% - 30rpx);
				display: flex;
				justify-content: space-between;
				padding-right: 30rpx;
			}
		}
	}
</style>